import { ref } from 'vue';

export function useTogglePicker() {
  const showPicker = ref(false);

  const metricList = [
    { text: 'cm', value: '1' },
    { text: 'mm', value: '0.1' },
    { text: 'm', value: '100' },
  ];
  const imperialList = [
    { text: 'in', value: '1' },
    { text: 'ft', value: '12' },
  ];

  const columns = ref([]);

  function togglePicker(unit) {
    showPicker.value = true;

    if (unit === 'metric') {
      columns.value = metricList;
      return;
    }

    columns.value = imperialList;
  }

  return {
    showPicker,
    togglePicker,
    columns,
  };
}
